<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>服务器推送</title>
</head>
<body>
<div>
    <div id="dataModule"></div><br/>
    <div id="note" style="width: 100%;" ></div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
<script th:inline="javascript" >
    $(function() {
        var time=1;
        var xhr;
        if (window.XMLHttpRequest){
            //IE7+, Firefox, Chrome, Opera, Safari浏览器支持该方法
            xhr=new XMLHttpRequest();
        }else{
            //IE6, IE5 浏览器不支持，使用ActiveXObject方法代替
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr);
        xhr.open('POST', '/quotes');
        xhr.send(null);//发送请求
        xhr.onreadystatechange = function() {
            console.log("s响应状态：" + xhr.readyState);
            //2是空响应，3是响应一部分，4是响应完成
            if (xhr.readyState > 2) {
                //这儿可以使用response(对应json)与responseText（对应text）
                var newData = xhr.response.substr(xhr.seenBytes);
                newData = newData.replace(/\n/g, "#");
                newData = newData.substring(0, newData.length);
                console.log("数据：" + newData);
                if(newData){
                    //将字符串类型的json转成json对象
                    var data = JSON.parse(newData.split("#"));
                    //显示加载次数，和大小
                    $("#dataModule").append("第"+time+"次数据响应"+data.length+"条<br/>");

                    $("#note").append("<div style='clear: both;'>第"+time+"次数据响应"+data.length+"条</div><div id='note"+time+"' style='width: 100%;'></div>");
                    var html="";
                    console.log("数据：" + data);
                    for(var i=0;i<data.length;i++) {
                        var obj = data[i];
                        html=html + "<div style='margin-left: 10px;margin-top: 10px; width: 80px;height: 80px;background-color: gray;float: left;'>"+obj.ticker+"</div>";
                    }
                    $("#note"+time).html(html);
                    time++;
                    //长度重新赋值,下次截取时需要使用
                    xhr.seenBytes = xhr.response.length;
                }else{
                    $("#dataModule").append("响应完成！！！");
                }
            }
        }
    })
</script>
</body>
</html>